<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue2.js"></script>
</head>

<body>
    <div id="app">
        <father></father>
    </div>
  <!--   <template id="tmp">
        <div>
            <p>我是子组件</p>
            <son></son>
        </div>
    </template> -->
    <script>
        /* 父组件 */
         Vue.component("father", {
         template: "<div><p>我是父组件</p><son></son></div>",
             // 通过components属性创建子组件
             components:{
                 son:{
                     template:"<p>我是一个子组件</p>"
                 }
             },
             data() {
                 return {
                     msg: "hello world"
                 }
             }
         });

        // Vue.component("father", {
        //     template: "#tmp",
        //     /* 子组件 */
        //     components: {
        //         son: {
        //             template: "<p>我是子组件</p>"
        //         }
        //     }
        // });

        var vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>